<route lang="json5">
{
  style: {
    navigationBarTitleText: '讨论详情',
  },
  easycom: {
    autoscan: true,
    custom: {
      'h-(.*)': '@/components/h-$1/h-$1.vue',
    },
  },
}
</route>

<template>
  <view>
    <!-- 作者动态 -->
    <Dynamic
      v-for="item in [state.detailsInfo]"
      :key="item.id"
      :themeName="item.topicName"
      :imgList="item.picture"
      :avatar="item.headshot || defaultUserAvatar"
      :name="item.name"
      :propsUserId="item.userId"
      :publishTime="item.createTime"
      :content="item.content"
      :isLike="item.isLike"
      :likeNumber="item.likeCount"
      :chatNumber="item.commentCount"
      @clickThumbsup="clickThumbsup(item.userId)"
      @clickDel="clickDel(item)"
      class="bg-[#fff] mt-20rpx"
    />
    <!-- 评论 -->
    <view class="min-h-[calc(100vh-384rpx)] bg-[#fff]">
      <CommentBox
        ref="commentRef"
        v-model="inputVal"
        :commentId="state.commentId"
        :userInfo="state.detailsInfo"
        :avatar="state.detailsInfo.headshot || defaultUserAvatar"
        :list="state.commentList"
        @getLike="getLike"
        @sendComment="sendComment"
        @getMore="getMore"
        @remove="remove"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
/* 引入 组件 */
import Dynamic from '@/uni_modules/comments/components/qizai-dynamic/Dynamic.vue'
import CommentBox from '@/uni_modules/comment-box/components/h-comment-box/index.vue'

/* 引入 图片 - 评论默认头像 */
import defaultUserAvatar from '@/static/images/comment/default_user.png'

/* 引入 mock 数据 */
import { commentsList } from '../config/index'
import {
  addDiscussionComment,
  addLike,
  cancelLike,
  deleteDiscussion,
  getRowData,
} from '@/service/edu/comment'
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'

/* 定义数据 */
const state = reactive<{
  commentId: string
  detailsInfo: any
  commentList: any[]
}>({
  commentId: '', // 帖子id
  detailsInfo: {},
  commentList: [],
})

/* 获取评论详情 - 楼主信息 */
async function getDetail() {
  const res: any = await getRowData(state.commentId)
  if (res?.code === 200) {
    const { data = {} } = res
    console.log('评论完开始调去了', data)

    /* 对 某些数据 进行额外处理 */
    if (data.picture) {
      if (typeof data.picture === 'string') {
        data.picture = data.picture.split(',')
      }
    } else {
      data.picture = []
    }
    if (data.commentList.length > 0) {
      state.commentList = data.commentList
    } else {
      state.commentList = []
    }
    state.detailsInfo = data
    console.log('啦啦啦state.commentList', state.commentList)
  }
}

// 点赞
const userStore = useUserStore()
const toast = useToast()
async function clickThumbsup(toId: number | string) {
  try {
    await (state.detailsInfo.isLike
      ? cancelLike({ someId: state.commentId, likeType: 1 })
      : addLike({
          discussionId: state.commentId, // 被点赞的帖子id
          likeType: 1, // 1为帖子，2为评论
          fromId: userStore.userInfo?.userId, // 点赞人id
          toId, // 被点赞人id
        }))
    await getDetail()
  } catch (error) {
    // 处理错误情况
    console.error('Error handling like:', error)
    await getDetail()
  }
}

onLoad(async (query) => {
  const { commentId } = query
  state.commentId = commentId
  await getDetail()
})

const commentRef = ref(null) // 评论组件实例
const inputVal = ref('') // 评论弹框的value

/* 模拟当前用户信息 */
const userInfo = ref({
  id: userStore.userInfo?.userId,
  name: state.detailsInfo.name,
  url: state.detailsInfo.headshot,
  contentStr: inputVal.value,
  isLike: false,
  likeNum: 0,
})

/**
 * 点赞事件
 * @param data {index: number, j: number}  index 一级评论的索引 j 回复的索引
 * @param callback  调用点赞接口成功后，调用该方法更新点赞状态
 */
async function getLike(data, callback) {
  // j 是给回复点赞，给一级评论点赞时，j 为undefined

  console.log('点赞了', data) // 输出：{index: 0，j: undefined}

  let bol
  const isLike = data.rows.isLike
  if (!isLike) {
    bol = await addLike({
      discussionId: state.commentId, // 帖子id
      commentId: data.rows.id, // 评论id
      likeType: 2, // 1为帖子，2为评论
      fromId: userStore.userInfo.userId, // 点赞人id
    })
  } else {
    bol = await cancelLike({
      someId: data.rows.id,
      likeType: 2, // 1为帖子，2为评论
    })
  }

  if (bol) {
    callback() // 点赞成功后调用该方法 更新点赞状态
    await getDetail()
  } else {
    uni.showToast({ title: '取消点赞失败，请稍候重试~', icon: 'none' })
  }
}

/**
 * 发送评论事件
 * @param data {index: number, index_s: number, row: {一级评论的信息}, row_s: { 点击当前回复的信息} }
 * @param callback
 */
async function sendComment(data, callback) {
  // 给一级评论回复时，row_s 为空对象 {}
  console.log(
    data,
    'inputVal ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️',
    inputVal.value,
  ) // 输出： {index: 0, index_s: 0, row: {…}, row_s: {…}}

  let params: any = {}

  params = {
    ...userInfo.value,
    contentStr: data.contentStr,
    content: data.contentStr,
    userId: userStore.userInfo?.userId,
    // address: data.address,
  }

  // 判断是否有回复的人，有的话，就是回复的回复，没有就是回复的一级评论
  if (data.row_s) {
    params.to_user_id = data.row_s.id
    params.toUserName = data.row_s.name
  }

  if (data.row) {
    params.parentCommentId = data.row.id
    // params.discussionId = state.commentId
  }

  await addDiscussionComment({
    discussionId: state.commentId,
    parentCommentId: params.parentCommentId,
    content: params.content,
    userId: userStore.userInfo?.userId,
    toUserName: params.toUserName,
    // address: Array.isArray(params.address) ? '' : params.address || '',
  })
  // console.log(res, '评论成功', params)

  // 评论接口发送成功后，把当前评论的信息传给 callback(新的评论信息，接口返回) 用于更新评论列表
  // if (res.code === 200) {
  //   callback(params)
  // } else {
  //   toast.error(res?.msg || '评论失败，请稍候重试~')
  // }

  callback(params)

  // await getDetail()

  // 关闭评论框
  commentRef.value.close()
}

/**
 * 获取更多评论
 * @param data {index: number, row: {一级评论的信息}}
 * @param callback 调用获取更多回复接口成功后，调用该方法更新回复列表，会自动关闭加载动画
 */
function getMore(data, callback) {
  // 调用 获取更多评论接口，成功后调用 callback(【新的评论信息，接口返回，可是对象】) 用于更新评论列表
  console.log(data, 'data')
  setTimeout(() => {
    callback([
      {
        user_reply_name: 'h_comment',
        user_reply_id: 20,
        isMyComment: true,
        user_reply_content:
          'h_comment是基于uniapp和uview的一个评论组件，基于uview评论模版新增了二级评论功能',
        user_reply_avatar: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
        user_reply_is_like: false,
        user_reply_like_num: 33,
        pid: data.row.id,
        user_reply_date: '2023-06-01 12:00',
        to_user_id: '',
        to_user_name: '',
      },
      {
        user_reply_name: 'h_comment_box',
        user_reply_id: 21,
        isMyComment: false,
        pid: data.row.id,
        user_reply_content:
          'h_comment是基于uniapp和uview的一个评论组件，基于uview评论模版新增了二级评论功能',
        user_reply_avatar: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
        user_reply_is_like: false,
        user_reply_like_num: 33,
        user_reply_date: '2023-06-01 12:00',
        to_user_id: '',
        to_user_name: '',
      },
    ])
  }, 200)
}

/**
 * 删除评论
 */
function remove(data, callback) {
  // 调用删除接口
  console.log(data)

  // 调用删除接口成功后，调用 callback() 用于更新评论列表
  callback()
}

/* 删除本人动态 */
function clickDel(item) {
  uni.showModal({
    title: '提示',
    content: '确认要删除此条发布内容吗？',
    success: async (res) => {
      if (res.confirm) {
        console.log('用户点击确定')
        try {
          await deleteDiscussion(item.id)
          uni.navigateBack()
        } catch (e) {
          console.error('删除失败', e)
        } finally {
          // revertRef.value.close()
        }
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}
</script>
